<template>
	<view>
		<view class="my-list" v-if="listData.length>0">
			<view class="my-item" v-for="(item,index) in listData" :key="item.id" @click="bindDetail(item.id,item.up_type)">
				<view class="my-item-left">
					<image :src="IMG_URL+item.img" mode="aspectFill"></image>
				</view>
				<view class="my-item-right">
					<view class="my-item-title">
						<text>{{item.name}}</text>
						<icon class="icon-sex" :class="{'icon-sex-mm' : item.sex!=1}"></icon>
					</view>
					<view class="my-item-address">
						<icon class="icon-address"></icon>
						<text>{{item.city+item.district}}</text>
					</view>
					<view class="my-item-time">{{item.birth}}</view>
				</view>
				<!-- 点赞评论数 -->
				<view class="my-item-lc" v-if="!isCollect">
					<view class="my-item-lc-gz">
						<icon class="icon-like"></icon>
						<text>{{item.like}}</text>
					</view>
					<view class="my-item-lc-gz">
						<icon class="icon-comment"></icon>
						<text>{{item.comment}}</text>
					</view>
				</view>
				<!-- 已收藏 -->
				<view class="collect-box" v-else @click.stop="xDecollect(item.deid)">
					<icon class="icon-WDSC"></icon>
					<text>已收藏</text>
				</view>
			</view>
		</view>
		<!-- 没有数据 -->
		<view class="list-no-data" v-else>
			<image src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/lits-nodata.png" mode="" class="no-data-img"></image>
			<text class="no-data-txt">暂无数据</text>
			<button class="no-data-btn" @click="goAdopt">去逛逛吧</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyList",
		props: {
			isCollect: {
				type: Boolean,
				default: false
			},
			listData:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				IMG_URL:'https://nabercat.oss-cn-hangzhou.aliyuncs.com/'
			}
		},
		methods: {
			// 去逛逛
			goAdopt:function(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			
			// 商品详情
			bindDetail:function(id,type){
				let t= type==1 ? 4 : 2
				uni.navigateTo({
					url: `/pages/buyDetail/buyDetail?id=${id}&type=${t}`
				})
				// this.$emit('detail',id)
			},
			
			// 取消收藏
			xDecollect(id){
				this.$emit('qxDecollect',id)
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-list {
		padding: 20rpx;
	}

	.my-item {
		width: 100%;
		height: 252rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx 32rpx 36rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;
	}

	.my-item-left {
		width: 188rpx;
		height: 188rpx;
		margin-right: 32rpx;
	}

	.my-item-left image {
		width: 188rpx;
		height: 188rpx;
		border-radius: 10rpx;
	}

	.my-item-right {
		flex: 1;
		padding-top: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.my-item-right .my-item-title {
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
	}

	.my-item-right .my-item-title>text {
		max-width: 350rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.my-item-right .my-item-title>.icon-sex {
		width: 28rpx;
		height: 28rpx;
		background: url(../../../static/images/sex-gg.png) no-repeat;
		background-size: cover;
		margin-left: 10rpx;
	}

	.my-item-right .my-item-title>.icon-sex-mm {
		background: url(../../../static/images/sex-mm.png) no-repeat;
		background-size: cover;
	}

	.my-item-right .my-item-address {
		display: flex;
		align-items: center;
		color: #666666;
		font-size: 22rpx;
		margin-bottom: 30rpx;
	}

	.my-item-right .my-item-address .icon-address {
		width: 20rpx;
		height: 26rpx;
		background: url(../../../static/images/icon-i-address.png) no-repeat;
		background-size: cover;
		margin-right: 10rpx;
	}

	.my-item-right .my-item-address>text {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.my-item-right .my-item-time {
		width: 118rpx;
		height: 28rpx;
		background: rgba(252, 95, 95, 0.08);
		border-radius: 17rpx;
		text-align: center;
		line-height: 28rpx;
		color: #FC8F8F;
		font-size: 18rpx;
	}




	.my-item-lc {
		display: flex;
		position: absolute;
		bottom: 36rpx;
		right: 36rpx;
	}

	.my-item-lc .my-item-lc-gz {
		display: flex;
		align-items: center;
		margin-left: 72rpx;
		color: #666666;
		font-size: 20rpx;
	}

	.my-item-lc .my-item-lc-gz>icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}

	.my-item-lc .my-item-lc-gz .icon-like {
		background: url(../../../static/images/like.png) no-repeat;
		background-size: cover;
	}

	.my-item-lc .my-item-lc-gz .icon-comment {
		background: url(../../../static/images/comment.png) no-repeat;
		background-size: cover;
	}

	.collect-box {
		position: absolute;
		right: 32rpx;
		bottom: 24rpx;
		width: 188rpx;
		height: 52rpx;
		line-height: 52rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		border: 2rpx solid #FC8F8F;
		color: #FC8F8F;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
	}

	.collect-box .icon-WDSC {
		width: 32rpx;
		height: 32rpx;
		background: url(../../../static/images/detail-collect-active.png) no-repeat;
		background-size: cover;
	}


	.list-no-data {
		height: 100vh;
		padding-top: 308rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.list-no-data .no-data-img {
		width: 423rpx;
		height: 266rpx;
		margin-bottom: 36rpx;
	}

	.list-no-data .no-data-txt {
		color: #333333;
		font-size: 24rpx;
		margin-bottom: 88rpx;
	}

	.list-no-data .no-data-btn {
		width: 360rpx;
		height: 78rpx;
		background: #FC8F8F;
		border-radius: 39rpx;
		text-align: center;
		line-height: 78rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
</style>
